<template>
    <div style="background-color: #fff;">
        <headerComVue>居民详情</headerComVue>
        <div class="content">
            <!-- <el-tabs type="border-card">
                <el-tab-pane label="健康档案">健康档案</el-tab-pane>
                <el-tab-pane label="健康记录">健康记录</el-tab-pane>
                <el-tab-pane label="签约信息">签约信息</el-tab-pane>
                <el-tab-pane label="服务记录">服务记录</el-tab-pane>
            </el-tabs> -->
            <div class="radioBox">
                <el-radio-group v-model="radio">
                    <el-radio-button label="健康档案" />
                    <el-radio-button label="健康记录" />
                    <el-radio-button label="签约信息" />
                    <el-radio-button label="服务记录" />
                </el-radio-group>
            </div>
            <div class="comContainer">
                <healthRecord v-if="radio==='健康记录'" :residentid="id"></healthRecord>
            </div>

        </div>

    </div>
</template>
 
<script setup lang='ts'>
import headerComVue from '@/components/ResidentMan/headerCom.vue';
import { ref, reactive } from 'vue'
import healthRecord from '@/components/ResidentMan/healthRecord.vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
let store = useStore()
let router = useRouter()
let route = useRoute()
const radio = ref<string>('健康记录')

let id: any = route.query.id

</script>
 
<style scoped lang='less'>
.comContainer {
    margin-top: 40px;
}

.radioBox {
    background-color: rgba(242, 247, 251, 0.498039215686275);
    height: 48px;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(242, 242, 242, 1);

    .el-radio-button {
        height: 48px;

        :deep(.el-radio-button__inner) {
            height: 48px;
            line-height: 48px;
            padding: 0;
            width: 125px;
            color: #1877F2;
            border: none;
            background-color: rgba(242, 247, 251, 0.498039215686275);

        }
    }

    :deep(.is-active) .el-radio-button__inner {
        color: #fff;
        background-color: rgba(24, 119, 242, 1);
    }
}

.el-tabs {
    --el-tabs-header-height: 48px;
}

:deep(.el-tabs__item) {
    // width: 125px;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #1877F2;
    padding: 0 30px;
    text-align: center;
    box-sizing: border-box;
}

:deep(.el-tabs--border-card)>.el-tabs__header .el-tabs__item {
    color: #1877F2;
}

:deep(.el-tabs--border-card)>.el-tabs__header .el-tabs__item.is-active {
    color: #fff;
    background-color: #1877F2;
}

:deep(.el-tabs--top).el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2) {
    padding-left: 30px;
}

:deep(.el-tabs--top).el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child {
    padding-right: 30px;
}

.content {
    padding: 0 20px;
}
</style>